<template>
  <div class="editor-user-input">
    <div class="editor-user-input__input">
      <a-input
        v-model="todo"
        class="editor-user-input__input__search"
        placeholder="Enter a Todo..."
        @pressEnter="handleInput"
      />
      <a-button @click="handleInput" :loading="isInputed">Add</a-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'UserInput',
  props: {
    msg: String
  },
  data () {
    return {
      isInputed: false,
      todo: ''
    }
  },
  computed: {
    ...mapState('list', ['lists']),
    ...mapGetters('list', ['listOptions'])
  },
  created () {
    this.$store.dispatch('list/getList')
  },
  methods: {
    async handleInput () {
      if (!this.todo) {
        this.$message.info('请输入内容')
        return
      }
      const res = await this.$store.dispatch('list/updateListData', { todo: this.todo })
      if (res) {
        this.$message.success('添加成功！')
        this.todo = ''
      } else {
        this.$message.error('已有重复todo！')
      }
    }
  }
}
</script>

<style lang="less">
.editor-user-input {
  &__input {
    width: 100vw;
    padding: 1rem;
    &__search {
      width: 70vw;
      margin: 0 1rem 0 0;
    }
    .ant-input-affix-wrapper .ant-input {
      background-color: rgba(0, 0, 0, 0.822);
      color: aliceblue;
      border-color: rgba(0, 0, 0, 0.822);
    }
  }
}
</style>
